<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Rate 评分"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />

    <hips-tabs
      slot="sub-header"
      v-model="active"
    >
      <hips-tab title="标准用法" />
      <hips-tab title="Dsx用法" />
    </hips-tabs>

    <div v-show="!active">
      <demo-block title="基础用法">
        <hips-rate
          v-model="value3"
          show-score
          style="margin-left: 20px"
        />
      </demo-block>

      <demo-block title="组合应用">
        <hips-rate
          v-model="value1"
          active-color="red"
          size="24px"
          style="margin-left: 20px"
        />
      </demo-block>

      <demo-block title="只读">
        <hips-rate
          v-model="value2"
          show-score
          style="margin-left: 20px"
          readonly
        />
      </demo-block>
    </div>
    <div v-show="active">
      <demo-block title="基础用法">
        <hips-rate
          :d-field="dsx.records.at(0).getField('value3')"
          style="margin-left: 20px"
        />
      </demo-block>

      <demo-block title="组合应用">
        <hips-rate
          :d-field="dsx.records.at(0).getField('value1')"
          style="margin-left: 20px"
        />
      </demo-block>

      <demo-block title="只读">
        <hips-rate
          :d-field="dsx.records.at(0).getField('value2')"
          style="margin-left: 20px"
        />
      </demo-block>
    </div>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Rate, Tabs, Tab } from '@hips/vue-ui';
import Dsx from '@hips/plugin-dataset-vuex';

export default {
  components: {
    [Rate.name]: Rate,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
  },
  mixins: [ BasicView ],
  data() {
    return {
      active: 0,
      value1: 2.7,
      value3: 0,
      value2: 2.7,
      dsx: new Dsx({
        moduleName: 'dsx-rate',
        autoCreate: true,
        fields: [
          {
            name: 'value3',
            defaultValue: 0,
            showScore: true,
          },
          {
            name: 'value1',
            defaultValue: 2.7,
            activeColor: 'red',
            size: '24px',
          },
          {
            name: 'value2',
            defaultValue: 2.7,
            showScore: true,
            readonly: true,
          },
        ],
      }),
    };
  },
};
</script>

<style lang="stylus" scoped>
>>> .demo-block {
    .wrapper {
        padding 10px
    }
}
</style>
